/* Write Rating */

#write-rating-container {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: ". date ."
                         ". menu-a ."
                         ". menu-b ."
                         ". submit ."
    ;
    grid-row-gap: 2rem;

}

#date {
    grid-area: date;
    margin: auto auto auto 0px;
}

.menu-header {
    font-weight: bold;
    font-size: 1.6rem;
}

#menu-a {
    grid-area: menu-a;
    
}



#food-a {
    margin: auto auto auto auto;
    justify-self: center;
}

#menu-b {
    grid-area: menu-b;
}

#food-b {
    margin: auto auto auto auto;
    justify-self: center;
    
}

#create-rating {
    grid-area: submit;
    margin: auto 0px auto auto;
}


/* Search Food */
/* Layout */
#search-container {

    display: grid;
    grid-area: content;

    grid-template-columns: 1fr 5fr 5fr 1fr;
    grid-template-rows:  .2fr 1fr .5fr;
    grid-template-areas:
        ". search-info search ."
        ". cards cards ."
        ". . create-food ."
    ;
    align-items: center;
    justify-items: center;
    overflow-x: visible;

    margin-top: 2rem;
    max-height: 100vh;
}

@media (max-width: 800px) {
    #search-food-container {
        grid-template-rows:  .2fr .2fr 1fr .5fr;
        grid-template-areas:
            ". search-info search-info ." 
            ". search search ."
            ". cards cards ."
            ". . create-food ."
        ;
    }
}

.search-info {
    grid-area: search-info;
}

#create-food {
    grid-area: create-food;
}

#search-food-container .school-cards {
    max-height: 100%;
}


/* Rate Food */

#rate-food-form {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:"buttons"
                        "count";

}

#button-container {
    grid-area: buttons;
    min-height: 85vh;
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr .2fr 1fr .2fr;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    grid-template-areas:"menu-a a_good a_neutral a_bad a_denied"
                        "menu-a-food a_good a_neutral a_bad a_denied"
                        "menu-b b_good b_neutral b_bad b_denied"
                        "menu-b-food b_good b_neutral b_bad b_denied";

    border-bottom: 1px solid var(--col1);
    padding-bottom: 1rem;
}

#menu-a-header {
    grid-area: menu-a;
    font-size: 15rem;
    text-align: center;
}

#menu-a-food {
    grid-area: menu-a-food;
    font-size: 1rem;
    text-align: center;
}

#a_good {
    
    grid-area: a_good;
    background:url(..\..\img\main_content\bleistift.svg);
    background-size: cover;

    color: transparent;
    background-color: green;


}

#a_neutral {
    grid-area: a_neutral;

    color: transparent;
    background-color: orange;
}

#a_bad {
    grid-area: a_bad;

    color: transparent;
    background-color: red;
}

#a_denied {
    grid-area: a_denied;

    color: transparent;
    background-color: black;
}

#menu-b-header {
    grid-area: menu-b;
    font-size: 15rem;
    text-align: center;
}

#menu-b-food {
    grid-area: menu-b-food;
    font-size: 1rem;
    text-align: center;
    
}

#b_good {
    grid-area: b_good;

    color: transparent;
    background-color: green;
}

#b_neutral {
    grid-area: b_neutral;

    color: transparent;
    background-color: orange;
}

#b_bad {
    grid-area: b_bad;

    color: transparent;
    background-color: red;
}

#b_denied {
    grid-area: b_denied;

    color: transparent;
    background-color: black;
}

.rate-food-button {
    transition: all 0.5em ease-in-out;
}

.rate-food-button:hover{
    transform: scale(1.1);
    z-index: 2;
}

#button-container input[type="submit"]{
    padding: 0rem;
}

@media (max-width: 1100px) {
    #button-container {
        max-width: 100vw;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr .5fr 5fr 1fr .5fr 5fr;
        grid-row-gap: 1rem;
        grid-column-gap: 1rem;
        grid-template-areas:". menu-a menu-a ."
                            ". menu-a-food menu-a-food ."
                            "a_good a_neutral a_bad a_denied"
                            ". menu-b menu-b ."
                            ". menu-b-food menu-b-food ."
                            "b_good b_neutral b_bad b_denied";
        max-height: 100vh;;

    }

    #menu-a-header {
        font-size: 5vw;
    }

    #menu-b-header {
        font-size: 5vw;
    }




    
}

/* options */

#options-container {
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". change-name-form ."
                        ". change-password-form ." 
                        ". reset-votes-form ." 
                        ;
    grid-gap: 2rem;
}

#options-container .form {
    max-width: 60%;
}

#options-container input[type="submit"] {
    margin-top: 1rem;
}

#change-name-form {
    grid-area: change-name-form;

}

#change-password-form {

    grid-area: change-password-form;


}

#reset-votes-form {
    grid-area: reset-votes-form;
}


/* Create Food */
#create-food-form {
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". name."
                        ". feedback."
                        ". button."
                        ;
    grid-gap: 2rem;
}

#create-food-name-form {
    grid-area: name;
}

#create-food-submit-button {
    grid-area: button;
    justify-self: end;
}